<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Meta Informations-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Site Title-->
    <title>MLearning</title>

    <!--Favicons-->
    <link rel="apple-touch-icon" sizes="60x60" th:href="@{assets/favicon/logo2.png}">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo5.png}" sizes="32x32">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo4.png}" sizes="16x16">
    <link rel="manifest" th:href="@{assets/favicon/manifest.json}">
    <link rel="mask-icon" th:href="@{assets/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{assets/favicon/logo3.png}">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!--Style Assets-->
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{vendors/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{vendors/owl/owl.carousel.css}">

    <!--Theme Style-->
    <link rel="stylesheet" th:href="@{assets/css/styles.css}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body>

<div id="page" class="site row">
    <header id="header" class="site-header">

        <nav class="navbar navbar-defatult navbar-fixed-top fluid-navbar navbar-style1">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a th:href="@{/}" class="navbar-brand">
                        <img th:src="@{assets/icons/logo9.png}" alt="" class="logo-img"/></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"
                            aria-expanded="false">
                        <span class="sr-only">Nav Opener</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="main-nav">
                    <ul class="navbar-nav nav navbar-right">
                        <li class="active"><a th:href="@{/}">主页</a></li>
                        <li><a th:href="@{login}" th:if="${session.user == null}"><i class="fa fa-sign-in"></i> 登录 </a>
                        </li>
                        <li><a th:href="@{register}" th:if="${session.user == null}"><i class="fa fa-user"></i> 注册 </a>
                        </li>
                        <li><a th:href="@{personal_center}" th:if="${session.user != null}" class="mark-img"
                               data-spm-anchor-id="5176.12281949.0.0">
                            <img class="userPhoto" style="width: 22px; height: 22px; vertical-align: middle; margin-right: 10px;
                                        border-radius: 15px;" src="https://ucc.alicdn.com/avatar/avatar3.jpg">
                            <span th:text="${session.user.getName()}"></span>
                        </a>
                        </li>
                        <li><a th:href="@{login}" th:if="${session.user != null}">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </header>

    <main id="contents" class="site-contnts">

        <!--Slider-->
        <div class="home-slider">
            <div class="item" data-slide="assets/images/slide1.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-11 col-md-8 col-lg-7">
                            <h2 class="slide-title">你想学习什么 <strong>计算机知识、技术</strong> 呢？</h2>
                            <p>学习永无止境！</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item" data-slide="assets/images/slide2.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-md-7 col-lg-6">
                            <h2 class="slide-title slide-title2"><strong>知识路径图</strong></h2>
                            <ul class="nav slide-flist">
                                <li>学习书籍推荐</li>
                                <li>书籍标签</li>
                                <li>书籍的知识结构</li>
                                <li>知识的学习顺序</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--Find Domain-->
        <div class="row domain-search bg-pblue">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <h2 class="form-title">搜索你想学的 <strong>知识</strong></h2>
                        <!--                        <p>Search for your dream domain now</p>-->
                    </div>
                    <div class="col-md-9">
                        <div class="input-group">
                            <input type="search" class="form-control" id="search">
                            <span class="input-group-addon"><input onclick="draw($('#search').val()); $('#li1').removeClass('active'); li2=$('#li2');li2.addClass('active');
                             $('#hst-1').removeClass('active');$('#hst-2').addClass('active');li2.children().removeAttr('onclick')"
                                                                   value="搜索" class="btn btn-primary"></span>
                        </div>
                        <p><strong>机器学习</strong> <strong>神经网络</strong><strong>python</strong>
                            <strong>爬虫</strong></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row why-choose-us" style="padding: 0px">
            <article class="row loop-post">
                <ul class="nav nav-tabs nav-justified hstab " role="tablist" align="center">
                    <li role="presentation" class="active" id="li1"><a href="#hst-1" aria-controls="hst-1" role="tab"
                                                                       data-toggle="tab">关于我们</a></li>
                    <li role="presentation" id="li2"><a href="#hst-2" aria-controls="hst-2" role="tab" data-toggle="tab"
                                                        >图谱查询</a>
                    </li>
                </ul>
                <div class="tab-content hst-contents">
                    <div role="tabpanel" class="tab-pane active" id="hst-1">
                        <div class="container">
                            <div class="row section-title text-center">
                                <h2>关&nbsp;&nbsp;于&nbsp;&nbsp;我&nbsp;&nbsp;们</h2>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 col-md-6 why-to-choose">
                                    <div class="row wtc-inner text-center">
                                        <div class="row wtc-icon"><img th:src="@{assets/icons/search1.png}"
                                                                       alt="HostPro Service Icon">
                                        </div>
                                        <h2 class="h4 wtc-title">搜索知识</h2>
                                        <p>目前我们的知识网络更侧重于<strong>计算机相关知识</strong>
                                            ，比如机器学习、神经网络。本网站是基于知识的知识图谱构建的。</p>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 why-to-choose">
                                    <div class="row wtc-inner text-center" >
                                        <div class="row wtc-icon"><img th:src="@{assets/icons/book.png}"
                                                                       alt="HostPro Service Icon">
                                        </div>
                                        <h2 class="h4 wtc-title">推荐相关图书</h2>
                                        <p>搜索所需知识点后，可为您推荐一本该知识的相关 <strong>书籍 </strong> 可供您学习查阅。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 col-md-6 why-to-choose">
                                    <div class="row wtc-inner text-center">
                                        <div class="row wtc-icon"><img th:src="@{assets/icons/wc6.png}"
                                                                       alt="HostPro Service Icon">
                                        </div>
                                        <h2 class="h4 wtc-title">了解知识体系</h2>
                                        <p>搜索所需知识点后，会显示出该知识点在所有相关书籍的<strong>知识结构</strong>中的位置，并且显示出与该知识点相邻的知识点。能够指引您查看学习该知识点的一整套逻辑顺序。
                                        </p>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 why-to-choose">
                                    <div class="row wtc-inner text-center">
                                        <div class="row wtc-icon"><img th:src="@{assets/icons/flag.png}"
                                                                       alt="HostPro Service Icon">
                                        </div>
                                        <h2 class="h4 wtc-title">明确学习目标</h2>
                                        <p>大致了解学习该知识点的学习过程后，可以根据阅读推荐的书籍去进一步深入了解该知识点。并且对未来将要进行哪些知识点的学习更有把握和计划。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="hst-2">
                        <div class="container">
                            <div class="row section-title text-center">
                                <h2>图&nbsp;&nbsp;谱&nbsp;&nbsp;查&nbsp;&nbsp;询</h2>
                                <br/>
                                <div class="col-md-12 sidebar">
                                    <aside class="row widget widget_tag_cloud">
                                        <div class="tagcloud">
                                            <a onclick="draw($(this).text())" class="tag-link-1" style="cursor: pointer">机器学习</a>
                                            <a onclick="draw($(this).text())" class="tag-link-1" style="cursor: pointer">神经网络</a>
                                            <a onclick="draw($(this).text())" class="tag-link-1" style="cursor: pointer">深度学习</a>
                                            <a onclick="draw($(this).text())" class="tag-link-1" style="cursor: pointer">自然语言处理</a>
                                        </div>
                                    </aside>
                                </div>
                            </div>
                            <div class="col-md-12 text-center" style="margin-left: 17%">
                                <div id="gxt" style="width:900px;height:826px"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </article>
            <section class="row c2a-plan">
                <div class="container">
                    <div class="row">
                        <div class="col-md-5 col-sm-6">
                            <h2 class="h1 c2ap-title">网站数据来源 <strong> 豆瓣图书 </strong></h2>
                            <ul class="nav c2ap-list">
                                <li><i class="fa fa-bolt"></i>通过<strong> 图书目录 </strong> 采集到该书知识体系</li>
                                <li><i class="fa fa-mouse-pointer"></i>通过每一本书的 <strong>图书标签</strong> 进行简要分类</li>
                                <li><i class="fa fa-gear"></i>标注、抽取、识别图书目录的 <strong>知识实体</strong> 从而得到更为简要的知识结构</li>
                            </ul>
                            <!--                        <a href="#" class="btn btn-primary">View Plan</a>-->
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <!--Footer-->
    <footer id="footer" class="site-footer">
        <!--Footer Bottom-->
        <section class="row site-footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 widget-footer">
                        <div class="row widget-content">
                            <ul class="menu">
                                <li style="color: #939393">鲁ICP备20006308</li>
                                <li>
                                    <a target="_blank"
                                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37011202000992"
                                       style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                                        <img th:src="@{assets/images/beian.png}" style="float:left;"/>
                                        <p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">
                                            鲁公网安备 37011202000992号</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </footer>

</div>
<!--modal-->
<div class="modal fade" id="noResult">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h4 class="modal-title" align="center">抱歉</h4>
                <br/>
                <div class="row" align="center">
                    没有搜索到该知识。原因可能是：
                    <br/><br/>
                    <p style="color: #c7254e">本知识网络还未收录该知识点</p>
                    <p style="color: #c7254e">您搜索的知识并不属于计算机知识点</p>
                    您可以搜索其他感兴趣的知识
                </div>
                <br/>
            </div>
            <div class="modal-footer">
            </div>
        </div>
        <!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{vendors/jquery.min.js}"></script>
<script th:src="@{echarts/echarts.js}"></script>
<script th:src="@{echarts/macarons.js}"></script>


<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{vendors/owl/owl.carousel.min.js}"></script>
<script th:src="@{vendors/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{vendors/magnific/jquery.magnific-popup.min.js}"></script>
<script th:src="@{vendors/isotope.pkgd.min.js}"></script>
<script th:src="@{vendors/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{vendors/form-validator/jquery.form.js}"></script>
<script th:src="@{vendors/form-validator/jquery.validate.min.js}"></script>
<script th:src="@{vendors/waypoint/waypoints.min.js}"></script>
<script th:src="@{vendors/couterup/jquery.counterup.min.js}"></script>
<script th:src="@{vendors/bootstrap-select/js/bootstrap-select.min.js}"></script>
<!--Theme JS-->
<script th:src="@{assets/js/hostpro.js}"></script>

<!--生成关系图-->
<script>
    var myChart = echarts.init($("#gxt")[0], "macarons", {renderer: 'svg'});
    var nodes;
    var links;
    var option;
    var centerIndex;
    myChart.on('click', function (params) {
        if (params.dataType === 'node' && params.data.category === 1) {
            nodes[params.dataIndex].category = 0;
            nodes[params.dataIndex].centerIndex = ++centerIndex;
            getMoreJson(params.name);
        }
        if (params.dataType === 'node' && params.data.category === 0) {
            window.open("book?search=" + params.name);
        }
    });
</script>
<script>
    function draw(name) {
        var search = name;
        if (search === null) {
            search = "神经网络";
        }
        $.ajax({
            url: "API/graph",
            type: "get",
            data: {'search': search},
            success: function (data) {
                if (data !== "null") {
                    myChart.clear();
                    centerIndex = 0;
                    data = JSON.parse(data);
                    nodes = data.nodes;
                    nodes[0].centerIndex = 0;
                    links = data.links;
                    categories = data.categories;
                    option = {
                        legend: [{
                            data: categories
                        }],
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            animation: false,
                            focusNodeAdjacency: true,//突出相邻
                            roam: true,
                            label: {//标签位置
                                normal: {
                                    position: 'inside',
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#2D2F3B',
                                        fontWeight: 'bolder'
                                    },
                                    show: true
                                }
                            },
                            edgeSymbol: ['circle', 'arrow'],
                            symbolSize: function (value, x) {//设置图像的大小
                                switch (x.data.category) {
                                    case 3:
                                        return 60;
                                    case 4:
                                        return 80;
                                    default:
                                        return 50;
                                }
                            },
                            draggable: true,
                            data: nodes,
                            categories: categories,
                            force: {
                                repulsion: 200,
                                gravity: 0.01,
                                edgeLength: [100, 300]
                            },
                            edges: links,
                            lineStyle: {
                                color: 'source',
                                curveness: 0.2
                            },
                            emphasis: {
                                lineStyle: {
                                    width: 10
                                }
                            }
                        }]
                    };
                    myChart.setOption(option, true);
                } else {
                    $('#noResult').modal('show');
                }
            },
            error: function (data) {
                // console.log(data);
            }
        })
    }

    draw("神经网络");
</script>
<script>
    function getMoreJson(name) {
        $.ajax({
            url: "API/graph",
            data: {'name': name},
            type: "get",
            success: function (data) {
                if (data !== "null") {
                    data = JSON.parse(data);
                    newNodes = data.nodes;
                    // console.log(newNodes);
                    for (let node of newNodes) {
                        nodes.push(node);
                    }
                    newLinks = data.links;
                    for (let link of newLinks) {
                        links.push(link);
                    }
                    myChart.setOption(option);
                }

            },
            error: function (data) {
                // console.log(data);
            }
        })
    }

</script>
</body>
</html>